<template>
	<view>
		<view class="head">
			<view class="name">登录</view>
		</view>
		
		<view class="each">
			<view class="text">账号</view>
			<view class="input">
				<input type="text" v-model="account" placeholder="请输入账号" />
			</view>
		</view>
		
		<view class="z-padding-t-48"></view>
		<view class="each">
			<view class="text">密码</view>
			<view class="input">
				<input password v-model="password" type="text" placeholder="请输入密码" />
			</view>
		</view>
		
		<view class="login-btn" @click="login">登录</view>
		
		<view class="z-padding-t-48"></view>
		<view class="z-flex" @tap="clickread">
			<image src="../../static/choose.png" v-if="!agree" class="choose_img" mode="" />
			<image src="../../static/choosed.png" v-else class="choose_img" mode="" />
			<view class="text_999 z-font-28 z-margin-l-8">
				已阅读并同意
				<text class="money" @tap.stop="infoTap('《用户协议》', 1)">《用户协议》</text>
				和
				<text class="money" @tap.stop="infoTap('《隐私政策》', 2)">《隐私政策》</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				agree: false,
				account:'',
				password:''
			}
		},
		methods: {
			login(){
				if(!this.agree) return this.$toast('请阅读并勾选同意协议！');
				if(!this.account) return this.$toast('请输入账号');
				if(!this.password) return this.$toast('请输入密码');
				this.$api.post('/storeLogin', {
					account: this.account,
					password: this.password
				}).then(res => {
					this.$toast('登录成功')
					uni.setStorageSync('token', res.data.userInfo.token);
					uni.setStorageSync('userinfo', res.data.userInfo);
					uni.setStorageSync('coupon', res.data.userInfo.coupon);
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/index/index',
						})
					},500)
				}).catch(res => {
					
				})
				
			},
			clickread() {
				this.agree = !this.agree;
				console.log(this.agree)
			},
		}
	}
</script>

<style lang="scss">
	.head {
		width: 750rpx;
		height: 524rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		background: linear-gradient(to bottom, #e6f6f2, #FFF);
		.name {
			text-align: center;
			padding-top: 276rpx;
			font-weight: 800;
			font-size: 56rpx;
			color: #1C274C;
		}
	}
	
	.each {
		width: 558rpx;
		margin: auto;
		.text {
			font-weight: bold;
			font-size: 26rpx;
			color: #1C274C;
		}
		.input {
			background: #F5F7F9;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding:32rpx;
			margin-top: 24rpx;
			input {
				font-size: 30rpx;
			}
		}
	}
	
	.login-btn {
		width: 622rpx;
		height: 98rpx;
		background: #4BC264;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		margin: auto;
		margin-top: 98rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 98rpx;
	}
	
	.money{
	  color:#50C469;
	}
	.choose_img{
	  width: 30rpx;
	  height:30rpx;
	}
</style>
